<template>
  <div class="container">
    <nav-bar title="TITIKA课程" />
    <div class="main-img">
      <img :src='product.ImagePath[0]' />
    </div>
    <div class="discrib">
      <div class="name">
        <!-- <div class="invate" v-if="!fromUser">
          <img src='../../assets/img/icon-invate.png' />
          <i>邀请他人</i>
        </div> -->
        {{product.ProductName}}
      </div>
      <div class="time" v-if="fromUser">2019.11.13 12:00 | TPH健身中心</div>
      <div class="area-time">
        <span v-if="virtualProductInfo.StartDate">开始时间: {{virtualProductInfo.StartDate}}</span>
        <p>{{virtualProductInfo.UseNotice}}</p>
      </div>
      <div class="price-m">{{product.MarketPrice}}元</div>
      <div class="price">{{product.MinSalePrice}}元</div>
      <div class="dis-tit">课程详情</div>
      <div 
        class="discription class-discription" 
        v-html="product.ProductDescription"
      >
      </div>
    </div>
    <div class="btn-cart">
      <div class="btn-in" v-if="fromNormal && !expired" @click="apply">立即报名</div>
      <div class="btn-in btn-gray" v-if="expired">已过期</div>
      <div class="btn-in btn-gray" v-if="fromUser">已报名</div>
      <div class="btn-in" v-if="fromBelong" @click="gotoList">查看报名清单</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getProduct } from '../../network/product'
import { getShareUrl } from '../../utils/share'
import { sharePage } from '../../utils/wx'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      productId: '',
      product: {
        ImagePath: []
      },
      virtualProductInfo: {},
      expired: false,
    }
  },
  computed: {
    fromBelong(){
      return this.$route.query.type === 'belong'
    },
    fromUser(){
      return this.$route.query.type === 'user'
    },
    fromNormal(){
      return this.$route.query.type === 'normal'
    }
  },
  mounted() {
    this.productId = this.$route.query.id
    this.getProductDetail()
  },
  methods: {
    async sharePage(){
      sharePage({
        title: this.product.ProductName,
        desc: '好友给你推荐了' + this.product.ProductName,
        link: await getShareUrl('class'),
      })
    },
    getProductDetail(){
      let id = this.productId
      getProduct(id, product => {
        this.product = product.Product
        this.virtualProductInfo = product.VirtualProductInfo

        // 判断是否过期
        let endDate = this.virtualProductInfo.EndDate
        let nowDate = new Date().getTime()
        if(endDate){
          endDate = new Date(this.virtualProductInfo.EndDate).getTime()
        }
        if(nowDate > endDate){
          this.expired = true
        }

        this.sharePage()
      })
    },
    apply(){
      this.$router.push({
        path: '/classApply',
        query: {
          id: this.$route.query.id,
        }
      })
    },
    gotoList(){
      this.$router.push({
        path: '/applyList',
        query: {
          id: this.$route.query.id,
        }
      })
    },
  },
}
</script>

<style scoped>
.container{
  background-color: #ffffff;
}
.main-img img{
  width: 100%;
}
.discrib{
  color: #555555;
  padding: 20px 25px 80px 25px;
  font-size: 14px;
}
.discrib .time{
  padding-top: 5px;
}
.discrib .name{
  color: #000000;
  font-size: 16px;
}
.discrib .price-m{
  color: #999;
  text-decoration: line-through;
}
.discrib .price{
  padding: 10px 0 20px 0;
  font-size: 16px;
  color: #d50721;
}
.discrib .discription{
  line-height: 1.8;
}
.discrib .discription img{
  max-width: 100%;
}
.btn-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff, #ffffff);
}
.btn-cart .btn-in{
  display: block;
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
.btn-cart .btn-gray{
  color: #ffffff;
  background-color: #d2d2d2;
}
.discrib .name .invate{
  float: right;
  padding-left: 10px;
}
.discrib .name .invate img{
  width: 15px;
  height: 15px;
  margin-right: 3px;
}
.discrib .name .invate i{
  font-size: 12px;
  color: #0598dd;
}
.area-time{
  padding-top: 10px;
}
.dis-tit{
  border-bottom: 1px solid #e4e4e4;
  line-height: 40px;
  margin-bottom: 10px;
  color: #999999;
}
</style>
<style>
.class-discription img{
  max-width: 100%;
}
</style>